import React, { useState, useMemo, useCallback } from 'react';
import { List, InputItem, Button, Toast } from 'antd-mobile';
import { modifyPwd } from '@/network/protocol'
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Cookies from 'js-cookie'

import './style.less';
const ModifyPwd = (props) => {
  const { toLoginout } = props;

  const [userId, setUserId] = useState('')
  const [password, setPassword] = useState('')
  const [password1, setPassword1] = useState('')
  const [userIderr, setuserIderr] = useState(false)
  const [pwderr, setpwderr] = useState(false)
  const [pwderr1, setpwderr1] = useState(false)
  const logout = useCallback(() => {
    toLoginout();
    Cookies.remove('token');
    Cookies.remove('role');
    Cookies.remove('userId');
    Cookies.remove('pwd');

  }, [toLoginout])

  const param = useMemo(() => {
    return {
      oldPass: password1, newPass: password,userId
    }
  }, [password, password1,userId])

    
  const set0 = useCallback((key) => {
    setUserId(key.trim())
  }, [])

  const set1 = useCallback((key) => {
    setPassword(key.trim())
  }, [])

  const set2 = useCallback((key) => {
    setPassword1(key.trim())
  }, [])

  const check = useCallback(() => {
    setuserIderr(userId ? false : true)
    setpwderr(password ? false : true)
    setpwderr1(password1 ? false : true)
    return userId && password && password1
  }, [password, password1,userId])

  const modify = useCallback(async () => {
    if (!check()) return
    try {
      let response = await modifyPwd(param);
      if (response.errorCode === 0) {
        Toast.success('修改密码成功,请重新登录')
      } else {
        Toast.fail(response.message || '修改密码失败')
      }
    } catch (error) {
      Toast.fail('修改密码失败')
    }

    //  props.toLogin(user)

  }, [check, param])

  return (
    <div className="ModifyPwd-box global-content">
      <img className="login-logo" src={require('../../assests/img/logo.png')} alt="" />
      <p className="login-text">修改密码</p>
      <List>
        <div className="InputItem-box">
          <InputItem
            clear
            placeholder="请输入账号"
            onChange={set0}
          />
          {userIderr && <span className="errtip">请输入账号</span>}
        </div>
        <div className="InputItem-box">
          <InputItem
            clear
            placeholder="请输入新密码"
            onChange={set1}
          />
          {pwderr && <span className="errtip">请输入新密码</span>}
        </div>
        <div className="InputItem-box">
          <InputItem
            clear
            placeholder="请输入旧密码"
            onChange={set2}
          />
          {pwderr1 && <span className="errtip">请输入旧密码</span>}
        </div>
        <Link className="forget" to="/" onClick={logout}>
          <p >返回登录</p>
        </Link>
      </List>
      <Button type="primary" onClick={modify}>
        确认
      </Button>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = {
  toLoginout: () => ({ type: 'LOGOUT' })
}


// export default ModifyPwd;
export default connect(mapStateToProps, mapDispatchToProps)(ModifyPwd);